<template>
	<view class="container">
		<view class="tui-order-list pad30">

			<block v-for="(item, orderIndex) in list" :key="index">
				<view class="tui-order-item" >

					<tui-list-cell padding="0">
						<view class="tui-goods-item">

							<view class="tui-goods-center">
								<view class="tui-good-info">
									<view class="tui-goods-name">{{item.remark}}</view>

								</view>
								<view class="tui-goods-attr">时间：{{item.createTime}}</view>
							</view>
							<view class="tui-price-right">
								<!-- <view class="tui-order-status"
									:class="item.status === 0 ?'font-color-theme':'font-color-main'">
									{{item.amount}}
								</view> -->
								<view class="tui-price-num font-color-red pt10">+ ￥{{item.amount}}</view>
								<view class="tui-price-num font-color-sub">￥{{item.hamount}}</view>
							</view>
						</view>
					</tui-list-cell>

				</view>

			</block>

		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="green"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	import {
		getMyIncome
	} from '@/apis/user'
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 20,
				loadding: false,
				pullUpOn: true
			}
		},
		mounted() {
			this.doGetMyIncome();
		},
		methods: {
			doGetMyIncome: function() {
				let that = this;
				getMyIncome(that.pageNum,that.pageSize).then(res => {
					// console.log(res)
					if (that.pageNum === 1) {
						that.list = [];
					}
					that.list = that.list.concat(res.rows)
					that.pageNum++;
					//是否可以加载更多
					that.pullUpOn = that.list.length < res.total
					//正在加载
					that.loading = false

				})

			},
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			console.log("business onPullDownRefresh")
			this.pageNum = 1;
			uni.stopPullDownRefresh();
			this.doGetMyIncome();
			
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("business onReachBottom")
			if(this.pullUpOn){
				this.doGetMyIncome();
			}
		}

	}
</script>

<style>
	.tui-order-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-order-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-cell-header {
		width: 100%;
		height: 74rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-cell-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.tui-order-item {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: #fff;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #333;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-center {
		flex: 1;
		padding: 10rpx 14rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 32rpx;
		color: #333;
	}

	.tui-goods-attr {
		font-size: 24rpx;
		color: #999;
		line-height: 32rpx;
		padding-top: 10rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-good-info {
		width: 100%;
		display: flex;
	}
</style>
